<template>
  <div class="viewport">
    <div class="fullScreen" @click="handlefullScreen">
      {{ fullscreenName }}
    </div>
    <echartPillar
      :list="ElectricitystatisticsList"
      :editVisible="editVisible"
      v-if="editVisible"
      :building_value4="building_value4"
      :AllbuildingList="AllbuildingList"
      @handleClose="handleClose"
    ></echartPillar>
    <div class="header_box_content">
      <!--宿舍用电能耗排名  -->
      <div class="monitor panel1 panelbackImage1 height20">
        <div class="inner1 inner1_top height20">
          <div class="category_info">
            <span class="schart_title2">用电能耗排名</span>
            <div class="select_build select_build2">
              <el-select
                v-model="building_value1"
                placeholder="请选择"
                size="small"
                @change="handlePowerRankings"
              >
                <el-option
                  v-for="item in AllbuildingList"
                  :key="item.areaCode"
                  :label="item.areaName"
                  :value="item.areaCode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div
            v-show="electro_power_show"
            id="electro-power"
            style="width: 100%; height: 210px"
          ></div>
        </div>
      </div>
      <!-- 宿舍用电能耗统计 -->
      <div class="panel1 monitor panelbackImage height20">
        <div class="inner1 height20">
          <div class="category_info">
            <el-popover
              placement="bottom-start"
              title=""
              :width="50"
              trigger="hover"
              content="点击查看大图"
            >
              <template #reference>
                <span
                  class="schart_title2 title_top cursorp"
                  @click="ElectricityStatistics"
                  >用电能耗统计
                  <i class="el-icon-caret-bottom" v-if="!editVisible"></i>
                  <i v-else class="el-icon-caret-top"></i
                ></span>
              </template>
            </el-popover>

            <div class="display_flex3 align-items">
              <div class="select_build select_build2">
                <el-date-picker
                  v-model="monthValue"
                  value-format="YYYY-MM"
                  :clearable="false"
                  type="month"
                  placeholder="选择"
                  @change="changeMonth"
                >
                </el-date-picker>
              </div>
              <div class="select_build select_build2">
                <el-select
                  v-model="building_value2"
                  placeholder="请选择"
                  size="small"
                  @change="handlePowerStatistics"
                >
                  <el-option
                    v-for="item in AllbuildingList"
                    :key="item.areaCode"
                    :label="item.areaName"
                    :value="item.areaCode"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div
            id="powerConsumption"
            v-show="powerConsumption_show"
            style="width: 100%; height: 220px"
          ></div>
        </div>
      </div>
      <!-- 设备状态 -->
      <div class="monitor panel1 panelbackImage height20">
        <span class="schart_title2">设备状态</span>

        <div class="schart_box">
          <div
            id="echartContainer"
            v-show="echartContainer_show"
            style="width: 50%; height: 250px"
          ></div>
          <div
            id="echartDeviceState"
            v-show="echartDeviceState_show"
            style="width: 50%; height: 250px; bottom: 20px"
          ></div>
        </div>
      </div>
      <div class="monitor panel1 panelbackImage height20">
        <div class="inner">
          <div class="schart_title">当前报警</div>
          <!--报警  -->
          <div>
            <div class="tAlarm_title1">报警</div>
            <div class="todayA_box">
              <div class="todayA_cont">
                <div>待处理</div>
                <div>
                  <span class="tAlarm">{{ alarmSum.newAlarm }}</span
                  ><span>起</span>
                </div>
              </div>
              <div class="todayA_cont">
                <div>人员处理</div>
                <div>
                  <span class="tAlarm">{{ alarmSum.userHandledAlarm }}</span
                  ><span>起</span>
                </div>
              </div>
              <div class="todayA_cont">
                <div>系统处理</div>
                <div>
                  <span class="tAlarm">{{ alarmSum.systemHandledAlarm }}</span
                  ><span>起</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 故障 -->
          <!-- <div>
              <div class="tAlarm_title2">项目概况</div>
              <div class="todayA_box">
                <div class="todayA_cont">
                  <div>待处理</div>
                  <div><span class="tAlarm1">3</span>起</div>
                </div>
                <div class="todayA_cont">
                  <div>人员处理</div>
                  <div><span class="tAlarm1">3</span>起</div>
                </div>
                <div class="todayA_cont">
                  <div>系统处理</div>
                  <div><span class="tAlarm1">3</span>起</div>
                </div>
              </div>
            </div> -->
          <!-- 异常 -->
          <!-- <div>
              <div class="tAlarm_title3">异常</div>
              <div class="todayA_box">
                <div class="todayA_cont">
                  <div>待处理</div>
                  <div><span class="tAlarm3">3</span>起</div>
                </div>
                <div class="todayA_cont">
                  <div>人员处理</div>
                  <div><span class="tAlarm3">3</span>起</div>
                </div>
                <div class="todayA_cont">
                  <div>系统处理</div>
                  <div><span class="tAlarm3">3</span>起</div>
                </div>
              </div>
            </div> -->
        </div>
      </div>
    </div>
    <div class="content_div">
      <div class="column column_top">
        <!-- <div class="personal_info">
          <div>/消防验收备案</div>
          <div class="category_info" id="categoryinfo">
            <ul>
              <li class="active">项目数量</li>
              <li>建筑面积</li>
              <li>投资阶段</li>
            </ul>
          </div>
        </div> -->
        <!-- <div class="line_line"></div> -->
        <div class="panel1 panelbackImage1 height30">
          <div class="inner">
            <div>
              <span class="schart_title">剩余电量情况</span>
              <div class="select_build select_build2">
                <el-select
                  v-model="building_value3"
                  placeholder="请选择"
                  size="small"
                  @change="handlePowerresidue"
                >
                  <el-option
                    v-for="item in AllbuildingList"
                    :key="item.areaCode"
                    :label="item.areaName"
                    :value="item.areaCode"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="category_info1">
              <div>房间号</div>
              <div>单位：KW.H</div>
            </div>
            <div
              id="electricityRestid"
              v-show="electricityRest_show"
              class="bottom20"
              style="height: 32rem"
            ></div>
          </div>
        </div>

        <div class="monitor panel1 panelbackImage2" style="height: 14.5rem">
          <div class="inner">
            <span class="schart_title panel_title">过载报警次数排行</span>
            <div class="content" style="display: block">
              <div class="head">
                <span class="col">序号</span>
                <span class="col col_width1">房间</span>
                <span class="col col_width2">楼栋</span>
                <span class="col">报警</span>
                <!-- <span class="col">报警时间</span> -->
              </div>
              <div class="marquee-view">
                <div :class="electroList.length > 3 ? 'marquee' : ''">
                  <div v-for="(item, index) in electroList" :key="index">
                    <div class="row">
                      <span class="col">{{ Number(index + 1) }}</span>
                      <span class="col col_width1">{{ item.roomNum }}</span>
                      <span class="col col_width2">{{ item.areaName }}</span>
                      <span class="col">{{ item.alarmTimes }}</span>
                      <!-- <span class="col">{{ item.lastAlarmTime }}</span> -->
                      <span class="icon-dot"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 楼栋 -->
      <div
        class="column column_top panel1 panelbackImage"
        id="container"
        v-if="containerShow"
      >
        <div class="cicle3"></div>
        <div class="cicle4"></div>
        <div class="cicle5"></div>
        <div class="cicle6"></div>
        <div class="cicle7"></div>
        <!-- <div v-for="(item, index) in alarmAllList" :key="index">
          <div class="cicle8">
            <span>{{item.areaName}}</span>
            <span>{{item.floor}}层</span>
          </div>
        </div> -->
        <div id="tag" style="display: none">
          <!-- v-for="(item, index) in buildingList" :key="index" -->
          <div>
            <span style="margin: 20px">{{ objbuilding.floor }}层</span>
            <div class="roomList">
              <div
                v-for="(childitem, childindex) in objbuilding.regionList"
                :class="
                  childitem.alarmingNum > 0 ? 'building_name1' : 'building_name'
                "
                :key="childindex"
                @click="
                  handlebuilding(childitem.roomNum, objbuilding.alarmingNum)
                "
              >
                {{ childitem.roomNum }}房间
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column column_top column_Alarm">
        <!-- <div class="personal_info">
          <div>/消防抽查统计</div>
        </div>
        <div class="line_line"></div>
        <div class="state_statistics">
          <div class="statistics_titlee">退窗项目</div>
          <div class="statistics_num color_g1" style="margin-left: 30px">
            45678
          </div>
          <div class="statistics_titlee" style="margin-left: 30px">
            连续2次以上退窗
          </div>
          <div class="statistics_num color_g5" style="margin-left: 30px">
            45678
          </div>
        </div> -->
        <!-- 今日报警 -->
        <!-- <div
          class="monitor panel1 panelbackImage2 todayAlarm"
          style="width: 400px; height: 13rem"
        >
          <div class="inner">
            <div class="schart_title">当前报警</div>

            <div>
              <div class="tAlarm_title1">报警</div>
              <div class="todayA_box">
                <div class="todayA_cont">
                  <div>待处理</div>
                  <div>
                    <span class="tAlarm">{{ alarmSum.newAlarm }}</span
                    ><span>起</span>
                  </div>
                </div>
                <div class="todayA_cont">
                  <div>人员处理</div>
                  <div>
                    <span class="tAlarm">{{ alarmSum.userHandledAlarm }}</span
                    ><span>起</span>
                  </div>
                </div>
                <div class="todayA_cont">
                  <div>系统处理</div>
                  <div>
                    <span class="tAlarm">{{ alarmSum.systemHandledAlarm }}</span
                    ><span>起</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> -->
        <div
          class="monitor panel1 panelbackImage2 realTimeAlarm"
          style="height: 55rem"
        >
          <div class="inner">
            <span class="schart_title panel_title" @click="alarmMgt()"
              >实时报警详情</span
            >
            <div class="content" style="display: block">
              <div class="head">
                <span class="col width4">时间</span>
                <span class="col">报警类型</span>
                <span class="col width4">设备名称</span>
                <span class="col">楼栋</span>
                <span class="col">房间号</span>
              </div>
              <div class="marquee-view">
                <div :class="alarmList.length > 10 ? 'marquee' : ''">
                  <div v-for="(item, index) in alarmList" :key="index">
                    <div class="row">
                      <span class="col width4">{{ item.alarmTime }}</span>
                      <span class="col">{{ item.alarmTypeName }}</span>
                      <span class="col width4">{{ item.deviceName }}</span>
                      <span class="col">{{ item.building }}</span>
                      <span class="col">{{ item.roomNum }}楼</span>
                      <span class="icon-dot"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="more" @click="handleMore">查看更多</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { nextTick, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/api";
import echartPillar from "../components/echart_pillar.vue";
// import { OrbitControls } from "three/examples/jsm/renderers/CSS3DRenderer";
// import Stats from "three/examples/jsm/libs/stats.module.js";
var boxMesh, material, controls, scene, renderer, camera;
var projectId = Number(localStorage.getItem("projectId"));
var areaCode = "";
var scene = new THREE.Scene();
var group = new THREE.Group();
var group1 = new THREE.Group();
var group2 = new THREE.Group();
var myChart,
  echartDevice,
  powerC,
  electropower,
  electricityRest,
  powerCoption,
  electropowerOption,
  myChartOption,
  echartDeviceOption,
  electricityRestOption;
let pNumber = 6,
  tNumber = 6;
export default {
  name: "dashboard",
  components: { echartPillar },
  data() {
    return {
      boxMeshList: [],
      innerWidth: 700,
      innerHeight: 680,
      containerShow: true,
      alarmList: [],
      buildList: [],
      buildingList: [],
      objbuilding: {},
      AllbuildingList: [],
      building_value1: "",
      building_value2: "",
      building_value3: "",
      building_value4: "",
      monthValue: "",
      d_areaCode: "",
      alarmSum: {},
      residuelist: [],
      electroList: [],
      electro_power_show: true,
      powerConsumption_show: true,
      echartContainer_show: true,
      echartDeviceState_show: true,
      electricityRest_show: true,
      allList: [],
      ElectricitystatisticsList: [],
      editVisible: false,
      alarmAllList: [],
      fullscreen: false,
      fullscreenName:"查看全屏"
    };
  },
  mounted() {
    scene = new THREE.Scene();
    group = new THREE.Group();
    group1 = new THREE.Group();
    group2 = new THREE.Group();
    // 基于准备好的dom，初始化echarts实例
    myChart = this.$echarts.init(
      document.getElementById("echartContainer"),
      null,
      { devicePixelRatio: 2.5 }
    );
    echartDevice = this.$echarts.init(
      document.getElementById("echartDeviceState"),
      null,
      { devicePixelRatio: 2.5 }
    );
    powerC = this.$echarts.init(
      document.getElementById("powerConsumption"),
      null,
      { devicePixelRatio: 2.5 }
    );
    electricityRest = this.$echarts.init(
      document.getElementById("electricityRestid"),
      null,
      { devicePixelRatio: 2.5 }
    );
    this.electro_power_show = false;
    this.powerConsumption_show = false;
    this.echartContainer_show = false;
    this.echartDeviceState_show = false;
    this.electricityRest_show = false;
    // 绘制图表
    myChartOption = {
      title: {
        text: "",
        orient: "vertical",
        top: "190",
        right: "0",
        textStyle: {
          fontSize: "12",
          color: "#fff",
        },
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        top: "210",
        right: "0",
        textStyle: {
          color: "#fff",
          fontSize: "12",
        },
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: ["40%", "60%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "15",
              color: "#fff",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 735,
              name: "设备无警告",
              itemStyle: {
                color: "#27bcddb3",
              },
            },
            {
              value: 580,
              name: "设备警告",
              itemStyle: {
                color: "#e6cf5c",
              },
            },
          ],
        },
      ],
    };
    // 绘制图表
    echartDeviceOption = {
      title: {
        text: "",
        orient: "vertical",
        top: "210",
        right: "0",
        textStyle: {
          fontSize: "12",
          color: "#fff",
        },
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        top: "230",
        right: "0",
        textStyle: {
          color: "#fff",
          fontSize: "12",
        },
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "15",
              color: "#fff",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 735,
              name: "设备在线",
              itemStyle: {
                color: "#005eff",
              },
            },
            {
              value: 580,
              name: "设备离线",
              itemStyle: {
                color: "#e651e2",
              },
            },
          ],
        },
      ],
    };

    // 宿舍用电能耗统计
    powerCoption = {
      title: {},
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },

      grid: {
        x: "1%", //距离左边
        x2: "2%", //距离右边
        y: "15%", // 上距离
        y2: "12%", // 下距离
        containLabel: true,
      },

      dataZoom: [
        //添加横线滚动条
        {
          start: 0, //默认为0
          end: 15, //默认为100
          type: "slider",
          show: true,
          xAxisIndex: [0],
          startValue: 10,
          handleSize: 0, //滑动条的 左右2个滑动条的大小
          height: 5, //组件高度
          left: 20, //左边的距离
          right: 20, //右边的距离
          bottom: 10, //右边的距离
          handleColor: "#CBBCDB", //h滑动图标的颜色
          handleStyle: {
            borderColor: "#CBBCDB",
            borderWidth: "1",
            shadowBlur: 2,
            background: "#CBBCDB",
            shadowColor: "#CBBCDB",
          },
          fillerColor: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
              //给第一个设置0，第四个设置1，就是垂直渐变
              offset: 0,
              color: "#CBBCDB",
            },
            {
              offset: 1,
              color: "#CBBCDB",
            },
          ]),
          backgroundColor: "rgba(37, 46, 100, 0.45)", //两边未选中的滑动条区域的颜色
          showDataShadow: false, //是否显示数据阴影 默认auto
          showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
          filterMode: "empty", // 当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
          zoomLock: true,
          showDetail: false, // 是否显示detail，即拖拽时候显示详细数值信息。
          handleIcon:
            "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z",
          filterMode: "filter",
        },
      ],
      formatter: function (params) {
        var texts = "";
        texts +=
          "房间号" +
          "<br>" +
          params[0].data.name +
          "<br>" +
          params[0].data.value;
        return texts;
      },
      xAxis: {
        type: "category",
        splitLine: { show: false },
        data: [],
        // axisLabel: {
        //   interval: 0,
        //   show: true,
        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          interval: 0,
          formatter: function (params) {
            var newParamsName = ""; // 最终拼接成的字符串
            var paramsNameNumber = params.length; // 实际标签的个数
            var provideNumber = tNumber; // 每行能显示的字的个数
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              /** 循环每一行,p表示行 */
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = ""; // 表示每一次截取的字符串
                var start = p * provideNumber; // 开始截取的位置
                var end = start + provideNumber; // 结束截取的位置
                // 此处特殊处理最后一行的索引值
                if (p == rowNumber - 1) {
                  // 最后一次不换行
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  // 每一次拼接字符串并换行
                  tempStr = params.substring(start, end) + "\n\n";
                }
                newParamsName += tempStr; // 最终拼成的字符串
              }
            } else {
              // 将旧标签的值赋给新标签
              newParamsName = params;
            }
            //将最终的字符串返回
            return newParamsName;
          },
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
      },
      series: [
        {
          name: "总电量",
          type: "bar",
          stack: "总电量",
          label: {
            show: true,
            position: "top",
          },
          data: [900, 345, 393, "-", "-", 135, 178, 286, "-", "-", "-"],
          barWidth: 25,
          itemStyle: {
            //柱状图上方显示数值
            normal: {
              color: "#0d6ece",
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
          },
        },
      ],
    };

    // 宿舍用电能耗排名
    electropower = this.$echarts.init(
      document.getElementById("electro-power"),
      null,
      { devicePixelRatio: 2.5 }
    );
    var xData = ["106", "105", "107", "109"];
    var yData = [];
    var color = "#0b7df3";
    var shadowColor = "#0b7df3";
    var barWidth = 15;

    electropowerOption = {
      title: {
        text: "本月用电量排名",
        textStyle: {
          //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
          fontSize: 12,
          color: "#747676",
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },

      grid: {
        x: "1%", //距离左边
        x2: "2%", //距离右边
        y: "15%", // 上距离
        y2: "12%", // 下距离
        // containLabel: true,
      },
      // dataZoom: [
      //   {
      //     //默认为滚动条型数据区域缩放组件
      //     show: true,
      //     zoomLock: true,
      //     start: 60,
      //     end: 0,
      //   },
      // ],
      xAxis: {
        type: "category",
        splitLine: { show: false },
        data: [],
        offset: 7,
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          interval: 0,
          formatter: function (params, rowData, rowIndex) {
            var newParamsName = ""; // 最终拼接成的字符串
            var paramsNameNumber = params.length; // 实际标签的个数
            var provideNumber = pNumber; // 每行能显示的字的个数
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
            /**
             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
             */
            // 条件等同于rowNumber>1
            if (paramsNameNumber > provideNumber) {
              /** 循环每一行,p表示行 */
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = ""; // 表示每一次截取的字符串
                var start = p * provideNumber; // 开始截取的位置
                var end = start + provideNumber; // 结束截取的位置
                // 此处特殊处理最后一行的索引值
                if (p == rowNumber - 1) {
                  // 最后一次不换行
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  // 每一次拼接字符串并换行
                  tempStr = params.substring(start, end) + "\n\n";
                }
                newParamsName += tempStr; // 最终拼成的字符串
              }
            } else {
              // 将旧标签的值赋给新标签
              newParamsName = params;
            }
            //将最终的字符串返回
            return newParamsName;
          },
        },
      },
      formatter: function (params) {
        var texts = "";
        texts +=
          "房间号" +
          "<br>" +
          params[0].data.name +
          "</br>" +
          params[0].data.value;
        return texts;
      },
      yAxis: {
        type: "value",
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
      },
      series: [
        {
          name: "用电能耗排名",
          type: "bar",
          stack: "用电能耗排名",
          barWidth: 25, // 柱图宽度
          barMaxWidth: 25,
          label: {
            show: true,
            position: "top",
          },
          data: [],
          itemStyle: {
            //柱状图上方显示数值
            normal: {
              color: "#0d6ece",
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
          },
        },
      ],
    };
    const data = [];
    for (let i = 0; i < 5; ++i) {
      data.push(Math.round(Math.random() * 200));
    }
    electricityRestOption = {
      grid: {
        x: "1%", //距离左边
        x2: "5%",
        y: "5%", // 上距离
        y2: "0%", // 下距离
        // left:"100%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      xAxis: {
        max: "dataMax",
        show: false,
      },
      // dataZoom: [
      //   {
      //     //默认为滚动条型数据区域缩放组件
      //     show: true,
      //     zoomLock: true,
      //     orient: "vertical",
      //     start: 60,
      //     end: 0,
      //   },
      // ],
      yAxis: [
        {
          type: "category",
          data: ["A", "B", "C", "D", "E"],
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
            interval: 0,
            formatter: function (params) {
              var newParamsName = ""; // 最终拼接成的字符串
              var paramsNameNumber = params.length; // 实际标签的个数
              var provideNumber = 6; // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // 表示每一次截取的字符串
                  var start = p * provideNumber; // 开始截取的位置
                  var end = start + provideNumber; // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n\n";
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName;
            },
          },
          axisLine: {
            show: false,
          },

          axisTick: {
            show: false,
          },

          splitLine: {
            show: false,
          },
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 9, // only the largest 3 bars will be displayed
        },
        {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          interval: 0,
          //设置柱状图右边参数
          show: true,
          inverse: true,
          data: [], //设置右边值
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 9, // only the largest 3 bars will be displayed
        },
      ],
      formatter: function (params) {
        var texts = "";
        texts +=
          "剩余电量" +
          "<br>" +
          params[0].data.name +
          "<br>" +
          params[0].data.value;
        return texts;
      },
      series: [
        {
          realtimeSort: false,
          showBackground: true,
          name: "剩余电量",
          type: "bar",
          data: data,
          label: {
            show: false,
            position: "right",
            // valueAnimation: true,
          },
          itemStyle: {
            normal: {
              color: "#0d6ece",
              label: {
                show: false, //开启显示
                position: "right",
                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 10,
                },
              },
            },
          },
        },
      ],
      legend: {
        show: false,
      },
    };
    var that = this;
    setTimeout(function () {
      projectId = Number(localStorage.getItem("projectId"));
      that.getAllbuild();
    }, 100);
    // changeMargin();
    that.innerWidth = document.getElementById("container").offsetWidth - 40;
    // function changeMargin() {
    //   that.containerShow = false;
    //   that.innerWidth = document.getElementById("container").offsetWidth;
    //   that.innerHeight = document.getElementById("container").offsetHeight;
    //   camera.updateProjectionMatrix();
    //   renderer.setSize(that.innerWidth, that.innerHeight);
    //   that.containerShow = true;
    // }
    // window.addEventListener("resize", changeMargin, false);
  },
  methods: {
    getAllbuild() {
      // // 楼栋
      var that = this;
      api
        .getListAPI("backup/indexData?projectId=" + projectId, {})
        .then((res) => {
          if (res.data.code == 1) {
            this.electro_power_show = true;
            this.powerConsumption_show = true;
            this.echartContainer_show = true;
            this.echartDeviceState_show = true;
            this.electricityRest_show = true;
            // 报警列表
            that.alarmList = res.data.data.alarmInfo;
            // 所有的楼栋select
            that.AllbuildingList = res.data.data.buildingList;
            // 报警统计
            that.alarmSum = res.data.data.alarmSum;
            if (res.data.data.buildingList.length > 0) {
              this.building_value1 = this.AllbuildingList[0].areaCode;
              this.building_value2 = this.AllbuildingList[0].areaCode;
              this.building_value3 = this.AllbuildingList[0].areaCode;
              this.building_value4 = this.AllbuildingList[0].areaCode;
              this.getDormitoryEnergy(this.AllbuildingList[0].areaCode, 1);
              this.getDormitoryEnergy(this.AllbuildingList[0].areaCode, null);
              this.getdumpEnergy(this.AllbuildingList[0].areaCode);
            }
            // 设备警告
            myChartOption.series[0].data[1].value = Number(
              res.data.data.deviceCount.alarmingDeviceNum
            );
            // 设备总数
            myChartOption.title.text =
              "设备总数" + res.data.data.deviceCount.sumDevice;
            // 设备无警告
            myChartOption.series[0].data[0].value =
              Number(res.data.data.deviceCount.sumDevice) -
              Number(res.data.data.deviceCount.alarmingDeviceNum);
            myChart.setOption(myChartOption);
            myChart.currentIndex = -1;
            setInterval(function () {
              var dataLen = myChartOption.series[0].data.length;
              // 取消之前高亮的图形
              myChart.dispatchAction({
                type: "downplay",
                seriesIndex: 0,
                dataIndex: myChart.currentIndex,
              });
              myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
              // 高亮当前图形
              myChart.dispatchAction({
                type: "highlight",
                seriesIndex: 0,
                dataIndex: myChart.currentIndex,
              });
            }, 1000);
            // 设备总数
            echartDeviceOption.title.text =
              "设备总数" + res.data.data.deviceCount.sumDevice;
            // 设备在线
            echartDeviceOption.series[0].data[0].value = Number(
              res.data.data.deviceCount.sumDeviceOnline
            );
            // 设备离线
            echartDeviceOption.series[0].data[1].value =
              Number(res.data.data.deviceCount.sumDevice) -
              Number(res.data.data.deviceCount.sumDeviceOnline);
            myChart.setOption(myChartOption);
            echartDevice.setOption(echartDeviceOption);
            echartDevice.currentIndex = -1;
            setInterval(function () {
              var dataLen = echartDeviceOption.series[0].data.length;
              // 取消之前高亮的图形
              echartDevice.dispatchAction({
                type: "downplay",
                seriesIndex: 0,
                dataIndex: echartDevice.currentIndex,
              });
              echartDevice.currentIndex =
                (echartDevice.currentIndex + 1) % dataLen;
              // 高亮当前图形
              echartDevice.dispatchAction({
                type: "highlight",
                seriesIndex: 0,
                dataIndex: echartDevice.currentIndex,
              });
            }, 1000);
            window.addEventListener("resize", function () {
              myChart.resize();
            });
            window.addEventListener("resize", function () {
              echartDevice.resize();
            });
            // window.onresize = function () {
            //   myChart.resize();
            // };
            // window.onresize = function () {
            //   echartDevice.resize();
            // };
          } else {
            ElMessage.error(res.data.message);
          }
        });

      //3d 获取所有楼栋
      api
        .getListAPI(
          "backup/indexData/alarmingBuilding?projectId=" + projectId,
          {}
        )
        .then((res) => {
          if (res.data.code == 1) {
            this.buildList = res.data.data;
            // for (var i = 0; i < res.data.data.length; i++) {
            //   res.data.data[i].regionList = [];
            //   this.getregionList(res.data.data[i].areaCode);
            // }
            that.getdata(res.data.data);
          }
        });
      this.getoverloadAlarmCount();
    },
    getregionList(areaCode) {
      return new Promise(function (resolve, reject) {
        api
          .getListAPI(
            "backup/indexData/alarmingRegion?areaCode=" + areaCode,
            {}
          )
          .then((resdata) => {
            if (resdata.data.code == 1) {
              resolve(resdata.data.data);
            } else {
              ElMessage.error(res.data.message);
            }
          })
          .catch((err) => {});
      });
    },
    //宿舍用电能耗排名
    getDormitoryEnergy(
      queryAreaCode,
      querySortElectricity,
      queryYearNum,
      queryMonthNum
    ) {
      var roomNum = [];
      var electricityRecord = [];
      var electricityAmountstatistics = [];
      api
        .postFormAPI("backup/indexData/regionElectricity", {
          queryYearNum: queryYearNum,
          queryMonthNum: queryMonthNum,
          queryAreaCode: queryAreaCode,
          querySortElectricity: querySortElectricity,
        })
        .then((res) => {
          if (res.data.code == 1) {
            if (querySortElectricity == 1) {
              for (var i = 0; i < res.data.data.length; i++) {
                if (i < 10) {
                  // if (res.data.data[i].roomNum.length > 4) {
                  //   var roomname =
                  //     res.data.data[i].roomNum.substring(0, 3) +
                  //     " \n" +
                  //     res.data.data[i].roomNum.substring(
                  //       3,
                  //       res.data.data[i].roomNum.length
                  //     );
                  //   roomNum.push(roomname);
                  // } else {
                  roomNum.push(res.data.data[i].roomNum);
                  // }
                  electricityRecord.push({
                    value: res.data.data[i].electricityRecord,
                    name: res.data.data[i].roomNum,
                  });
                }
              }
              electropowerOption.series[0].data = electricityRecord;
              // electropowerOption.series[1].data = electricityRecord;
              // electropowerOption.series[2].data = electricityRecord;
              if (roomNum.length > 9) {
                pNumber = 4;
              } else if (roomNum.length < 4 && roomNum.length > 2) {
                pNumber = 8;
              } else if (roomNum.length <= 2) {
                pNumber = 10;
              } else {
                pNumber = 6;
              }
              electropowerOption.xAxis.data = roomNum;
              electropower.setOption(electropowerOption);
              window.onresize = function () {
                electropower.resize();
              };
              // console.log(roomNum);
              // console.log(electricityRecord);
            } else {
              this.ElectricitystatisticsList = res.data.data;
              // console.log(this.ElectricitystatisticsList);
              for (var i = 0; i < res.data.data.length; i++) {
                // if (i < 10) {
                // if (res.data.data[i].roomNum.length > 4) {
                //   var roomname = res.data.data[i].roomNum.substring(0, 3);
                //   roomNum.push(roomname);
                // } else {
                roomNum.push(res.data.data[i].roomNum);
                // }
                electricityAmountstatistics.push({
                  value: res.data.data[i].electricityRecord,
                  name: res.data.data[i].roomNum,
                });
                // }
              }
              if (roomNum.length > 25) {
                tNumber = 5;
              } else if (roomNum.length < 11 && roomNum.length > 5) {
                tNumber = 8;
              } else if (roomNum.length < 5) {
                tNumber = 12;
              } else {
                tNumber = 6;
              }
              // 用电量统计
              powerCoption.xAxis.data = roomNum;
              powerCoption.series[0].data = electricityAmountstatistics;
              powerC.setOption(powerCoption);
              window.addEventListener("resize", function () {
                powerC.resize();
              });
            }
          }
        });
    },
    getdumpEnergy(areaCode) {
      // 宿舍剩余电量情况
      var roomNum = [];
      var electricityRestList = [];
      var that = this;
      api
        .getListAPI(
          "backup/indexData/urgentRechargeRegion?areaCode=" + areaCode,
          {}
        )
        .then((res) => {
          if (res.data.code == 1) {
            // console.log(res.data.data);
            that.residuelist = res.data.data;
            for (var i = 0; i < res.data.data.length; i++) {
              if (i < 10) {
                // if (res.data.data[i].roomNum.length > 4) {
                //   var roomname = res.data.data[i].roomNum.substring(0, 3);
                //   roomNum.push(roomname);
                // } else {
                roomNum.push(res.data.data[i].roomNum);
                // }
                electricityRestList.push({
                  value: Number(res.data.data[i].electricityRest).toFixed(1),
                  name: res.data.data[i].roomNum,
                });
              }
            }
            console.log(electricityRestList);
            electricityRestOption.yAxis[0].data = roomNum;
            electricityRestOption.yAxis[1].data = electricityRestList;
            electricityRestOption.series[0].data = electricityRestList;
            electricityRest.setOption(electricityRestOption);
            window.addEventListener("resize", function () {
              electricityRest.resize();
            });
          }
        });
    },
    getoverloadAlarmCount() {
      api
        .getListAPI(
          "backup/indexData/overloadAlarmCount?projectId=" + projectId,
          {}
        )
        .then((res) => {
          if (res.data.code == 1) {
            this.electroList = res.data.data;
          }
        });
    },
    async getdata() {
      // // 楼栋
      var that = this;

      var list = this.groupList(that.buildList, 4);
      // console.log(list);
      for (var i = 0; i < list.length; i++) {
        for (var j = 0; j < list[i].length; j++) {
          var geometry = new THREE.BoxBufferGeometry(30, 140, 30);
          // geometry.translate(-200 + 120 * j, 0, -120 + 120 * i);
          geometry.translate(-200 + 150 * j, 30, -120 + 150 * i);
          material = new THREE.MeshLambertMaterial({
            color: 0x0066cc,
            transparent: true,
            opacity: 0.8,
          });

          boxMesh = new THREE.Mesh(geometry, material);
          this.boxMeshList.push(boxMesh);
          // console.log(list[i][j]);
          // this.getregionList(list[i][j].areaCode).then((res) => {
          //   console.log(res.length)
          // });
          var regionList = [];
          await api
            .getListAPI(
              "backup/indexData/alarmingRegion?areaCode=" + list[i][j].areaCode,
              {}
            )
            .then((resdata) => {
              if (resdata.data.code == 1) {
                regionList = resdata.data.data;
              } else {
                ElMessage.error(res.data.message);
              }
            })
            .catch((err) => {});
          var geometry2;

          for (var z = 0; z < regionList.length; z++) {
            if (z < 7) {
              var mesh2, mesh3, geometry3, material3;
              geometry2 = new THREE.BoxGeometry(30, 1, 30);
              var material2 = new THREE.MeshLambertMaterial({
                color: 0x008888, //0x0066cc
                opacity: 0.2,
              });
              if (regionList[z].alarmingNum > 0) {
                that.alarmAllList.push({
                  areaName: list[i][j].areaName,
                  floor: regionList[z].floor,
                });
                console.log(that.alarmAllList);
                // alarmingNum大于0则是报警显示红色
                geometry3 = new THREE.BoxGeometry(31, 14, 31);
                material3 = new THREE.MeshLambertMaterial({
                  color: 0xff66cc, //0xff66ff
                  opacity: 0.2,
                });
              } else {
                geometry3 = new THREE.BoxGeometry(0, 0, 0);
              }
              mesh3 = new THREE.Mesh(geometry3, material3);
              geometry3.translate(-200 + 150 * j, -32 + 18 * z, -120 + 150 * i);
              group2.add(mesh3);
              scene.add(group2);
              mesh2 = new THREE.Mesh(geometry2, material2);
              geometry2.translate(-200 + 150 * j, -25 + 18 * z, -120 + 150 * i);
              group1.add(mesh2);
            }
          }

          // geometry3 = new THREE.BoxGeometry(100,1,100);
          // var material3 = new THREE.MeshLambertMaterial({
          //   color: 0x0066cc,
          //   transparent: true,
          //   opacity: 0.2,
          // });

          // 不设置网格模型的位置属性
          // boxMesh.position.set(x,y,z);
          group.add(boxMesh);
        }
      }

      scene.add(group);
      scene.add(group1);
      // scene.add(group2);
      // //遍历group，调用createTag函数批量创建模型标签
      // group.children.forEach(function (mesh, index) {
      //   that.createTag(mesh, index);
      // });
      /**
       * 光源设置
       */
      var point = new THREE.PointLight(0xffffff, 0.6);
      point.position.set(400, 200, 300); //点光源位置
      scene.add(point); //点光源添加到场景中
      var ambient = new THREE.AmbientLight(0xffffff, 0.4);
      scene.add(ambient);
      /**
       * 相机设置
       */
      //
      var width = this.innerWidth; //窗口宽度
      var height = this.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 0.01, width);
      camera.position.set(-132, 276, 275); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      // var axes = new THREE.AxisHelper(8000, 8000, 8000);
      // scene.add(axes);

      /**
       * 创建渲染器对象
       */
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

      function onWindowResize() {
        //遍历group，调用createTag函数批量创建模型标签
        group.children.forEach(function (mesh, index) {
          that.createTag(mesh, index);
        });
        width = document.getElementById("container").offsetWidth - 40;
        innerHeight = document.getElementById("container").offsetHeight;
        if (width < 600) {
          var k = width / innerHeight; //窗口宽高比
          var s = width * 2; //三维场景显示范围控制系数，系数越大，显示的范围越大
          //创建相机对象
          camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 0.01, s);
          camera.position.set(width / 4, width / 2, width); //设置相机位置
          camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        } else {
          var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
          var k = width / innerHeight; //窗口宽高比
          //创建相机对象
          camera = new THREE.OrthographicCamera(
            -s * k,
            s * k,
            s,
            -s,
            0.01,
            width
          );
          camera.position.set(width / 2, 76, 175); //设置相机位置
          camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        }
        controls = new OrbitControls(camera, renderer.domElement);
        console.log(width);
        camera.updateProjectionMatrix();
        renderer.setSize(width, height); //设置渲染区域尺寸
      }
      onWindowResize();
      window.addEventListener("resize", onWindowResize, false);
      renderer.setClearColor(0x222222, 0.0); //设置背景颜色
      // renderer.setClearAlpha (0.8);// 改变背景透明度值
      //WebGL渲染器输出的canvas画布，绝对定位，以免影响CSS3渲染的HTML元素显示
      // renderer.domElement.style.position = "absolute";
      // renderer.domElement.style.left = "-70px";
      // renderer.domElement.style.right = "0px";
      // renderer.domElement.style.padding = "0";
      // renderer.domElement.style.top = "-10px";
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      that.render();
      //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
      controls = new OrbitControls(camera, renderer.domElement);
      addEventListener("click", that.handlechoose); // 监听窗口鼠标单击事件
      document.querySelector("#container").appendChild(renderer.domElement);
    },
    groupList(array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while (index < array.length) {
        newArray.push(array.slice(index, (index += subGroupLength)));
      }
      return newArray;
    },
    //封装一个函数创建模型的标签
    //mesh：要标注的网格模型   index+1：楼的编号
    createTag(mesh, index) {
      //创建一个canvas画布绘制模型的信息，作为模型标签精灵的颜色贴图
      var canvas = document.createElement("canvas");
      //精灵模型会随着场景缩放，注意画布宽高尺寸不能太小
      //如果canvas宽高太小，精灵标签可能会模糊
      canvas.width = 356;
      canvas.height = 128;
      var c = canvas.getContext("2d");
      // 矩形区域填充背景，半透明
      c.fillStyle = "rgba(0,0,0,0.5)";
      c.fillRect(0, 0, 356, 128);
      c.beginPath();
      // c.beginPath();
      c.translate(40, 64);
      c.font = "normal 45px 微软雅黑";
      c.textBaseline = "middle";
      c.fillStyle = "#fff";
      // c.textAlign = "center";
      if (this.buildList.length > 0 && this.buildList[index]) {
        if (this.buildList[index].areaName) {
          c.fillText(this.buildList[index].areaName, 3, 3);
        }
      }
      // canvas画布对象作为CanvasTexture的参数重建一个纹理对象
      // canvas画布可以理解为一张图片
      var texture = new THREE.CanvasTexture(canvas);
      var spriteMaterial = new THREE.SpriteMaterial({
        map: texture,
      });
      // 创建精灵模型对象
      var sprite = new THREE.Sprite(spriteMaterial);
      //注意xy两个方向缩放比例和canvas宽高比例一致
      sprite.scale.set(63.9, 23, 1);
      //获得几何体顶点位置坐标数据
      var pos = mesh.geometry.attributes.position;
      // 通过长方体几何体的顶点坐标定位精灵模型标签
      sprite.position.set(pos.getX(0), pos.getY(0), pos.getZ(0));
      // 可以适当微调标签相对模型的位置
      sprite.position.x -= 10;
      sprite.position.y += 10;
      sprite.position.z -= 10;
      document.getElementById("tag").style.display = "none";
      scene.add(sprite);
    },
    // 渲染函数
    render() {
      renderer.render(scene, camera); //执行渲染操作
      requestAnimationFrame(this.render); //请求再次执行渲染函数render，渲染下一帧
    },
    tag(x, y) {
      /**
       * 立方体世界坐标转屏幕坐标
       */
      //创建一个三维向量作为世界坐标
      var worldVector = new THREE.Vector3();
      //获取网格模型boxMesh的世界坐标，赋值给worldVector
      boxMesh.getWorldPosition(worldVector);
      //世界坐标转标准设备坐标，standardVector是WebGL设备坐标
      var standardVector = worldVector.project(camera);
      // 根据WebGL标准设备坐标standardVector计算div标签在浏览器页面的坐标
      var a = this.innerWidth / 2;
      var b = this.innerHeight / 2;
      var x = Math.round(x * a + a); //标准设备坐标转屏幕坐标
      var y = Math.round(-y * b + b) > 390 ? 390 : Math.round(-y * b + b); //标准设备坐标转屏幕坐标
      // console.log(y);
      // 获得HTML元素创建的UI界面
      var tag = document.getElementById("tag");

      /**
       * 设置标签元素的位置
       */
      if (tag) {
        tag.style.left = x + "px";
        //这里的130px主要是为了标签和模型有一定偏移，当然也可以不设置，两者叠加在一起
        tag.style.top = y - 90 + "px";
      }
    },
    handlechoose(event) {
      var that = this;
      var Sx = event.clientX; //鼠标单击位置横坐标
      var Sy = event.clientY; //鼠标单击位置纵坐标
      var Sz = event.clientZ;
      //屏幕坐标转WebGL标准设备坐标
      let mainCanvas = document.getElementsByTagName("canvas")[5];
      var Sleft = 0;
      var Stop = 0;
      var offsetWidth = 0;
      var offsetHeight = 0;
      if (mainCanvas) {
        Sleft = mainCanvas.getBoundingClientRect().left || 0;
        Stop = mainCanvas.getBoundingClientRect().top || 0;
        offsetWidth = mainCanvas.offsetWidth;
        offsetHeight = mainCanvas.offsetHeight;
      }
      var x = ((Sx - Sleft) / offsetWidth) * 2 - 1; //WebGL标准设备横坐标
      var y = -((Sy - Stop) / offsetHeight) * 2 + 1; //WebGL标准设备纵坐标
      var z = -((Sz - Stop) / offsetHeight) * 2 + 1;
      //创建一个射线投射器`Raycaster`
      // console.log(y);
      var raycaster = new THREE.Raycaster();
      //通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
      raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
      // console.log(raycaster);
      //返回.intersectObjects()参数中射线选中的网格模型对象
      // 未选中对象返回空数组[],选中一个数组1个元素，选中两个数组两个元素
      // console.log(this.boxMeshList);
      var intersects = raycaster.intersectObjects(this.boxMeshList);
      // intersects.length大于0说明，说明选中了模型
      var index = 0;
      if (intersects.length > 0 && intersects[0]) {
        for (var i = 0; i < this.boxMeshList.length; i++) {
          if (this.boxMeshList[i].uuid == intersects[0].object.uuid) {
            index = i;
            areaCode = this.buildList[i].areaCode;
          }
        }
      }
      if (intersects.length > 0) {
        let buildIndex = null;
        let pointY = "";
        if (intersects[0].point && intersects[0].point.y) {
          pointY = intersects[0].point.y;
          console.log(pointY);
          console.log(intersects);
          if (pointY > -38 && pointY < -24) {
            buildIndex = 0;
          } else if (pointY > -24 && pointY < -6) {
            buildIndex = 1;
          } else if (pointY > -6 && pointY < 9) {
            buildIndex = 2;
          } else if (pointY > 9 && pointY < 28) {
            buildIndex = 3;
          } else if (pointY > 28 && pointY < 47) {
            buildIndex = 4;
          } else if (pointY > 47 && pointY < 63) {
            buildIndex = 5;
          } else if (pointY > 63 && pointY < 83) {
            buildIndex = 6;
          } else if (pointY > 83 && pointY < 100) {
            buildIndex = 7;
          }
        }
        if (buildIndex != null) {
          api
            .getListAPI(
              "backup/indexData/alarmingRegion?areaCode=" +
                this.buildList[index].areaCode,
              {}
            )
            .then((res) => {
              if (res.data.code == 1) {
                // for (var i = 0; i < 9; i++) {
                //   let indexdx = 1;
                //   if (res.data.data.length < 9 && res.data.data.length < i) {
                //     for (var j = 0; j < res.data.data.length; j++) {
                //       if (Number(res.data.data[j].floor) > 1) {
                //         console.log(res.data.data[j].floor);
                //         indexdx = Number(res.data.data[j].floor);
                //         if (indexdx > 1) {
                //           indexdx--;
                //         }
                //       } else {
                //         indexdx = i;
                //       }
                //     }
                //     res.data.data.push({
                //       alarmingNum: 0,
                //       floor: indexdx,
                //       regionList: [],
                //     });
                //   }
                // }
                let arr = this.setfloor(res.data.data);
                arr.sort(this.compare("floor"));
                console.log(arr);
                this.objbuilding = arr[buildIndex];
                // this.buildingList = res.data.data;
              } else {
              }
            });
        }
        document.getElementById("tag").style.display = "block";
        // 选中模型的第一个设置为半透明
        // intersects[0].object.material.transparent = true;
        // intersects[0].object.material.opacity = 0.6;
      } else {
        if (document.getElementById("tag")) {
          document.getElementById("tag").style.display = "none";
        }
      }
      this.tag(x, y);
      controls.addEventListener("change", that.tag);
    },
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
    setfloor(data) {
      let arr = [];
      for (let i = 0; i < 9; i++) {
        arr.push({
          alarmingNum: 0,
          floor: i + 1,
          regionList: [],
        });
      }
      arr.forEach((v, i) => {
        data.forEach((v2, i2) => {
          if (v.floor == v2.floor) {
            arr[i] = v2;
          }
        });
      });
      console.log(arr);
      return arr;
    },
    handlePowerRankings(res) {
      this.getDormitoryEnergy(res, 1);
    },
    handlePowerStatistics(res) {
      this.getDormitoryEnergy(res, null);
    },
    handlePowerresidue(res) {
      this.getdumpEnergy(res);
    },
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    changeMonth(res) {
      var arr = res.split("-");
      this.getDormitoryEnergy(
        this.building_value2,
        null,
        Number(arr[0]),
        Number(arr[1])
      );
    },
    ElectricityStatistics() {
      this.$nextTick(function () {
        this.editVisible = true;
      });
    },
    handleClose(res) {
      this.$nextTick(function () {
        this.editVisible = res;
      });
    },
  },
  setup(prop, context) {
    const name = localStorage.getItem("ms_username");
    const role = name === "admin" ? "超级管理员" : "普通用户";
    const data = reactive([
      {
        name: "2018/09/04",
        value: 1083,
      },
      {
        name: "2018/09/05",
        value: 941,
      },
      {
        name: "2018/09/06",
        value: 1139,
      },
      {
        name: "2018/09/07",
        value: 816,
      },
      {
        name: "2018/09/08",
        value: 327,
      },
      {
        name: "2018/09/09",
        value: 228,
      },
      {
        name: "2018/09/10",
        value: 1065,
      },
    ]);

    const router = useRouter();
    const alarmMgt = () => {
      router.push("/alarmMgt");
    };
    const handlebuilding = (roomNum, alarmingNum) => {
      if (alarmingNum > 0) {
        router.push("/alarmMgt?roomNum=" + roomNum + "&areaCode=" + areaCode);
      }
    };
    // 查看更多
    const handleMore = () => {
      router.push("/alarmMgt");
    };
    const fullscreen = ref(context.attrs.fullscreen);
    const fullscreenName = ref("查看全屏");
    // 是否包含左侧菜单
    const ismenu = ref(context.attrs.ismenu);
    let element = document.documentElement;
    if (!ismenu.value) {
      if (fullscreen.value) {
        fullscreenName.value = "查看全屏";
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        fullscreenName.value = "退出全屏";
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
    }
    // const handlefullScreen = () => {
    //   fullscreen.value = !fullscreen.value;
    //   context.emit("handlefullScreen", fullscreen.value);
    //   if (!ismenu.value) {
    //     let element = document.documentElement;
    //     if (fullscreen.value) {
    //       fullscreenName.value = "查看全屏";
    //       if (document.exitFullscreen) {
    //         document.exitFullscreen();
    //       } else if (document.webkitCancelFullScreen) {
    //         document.webkitCancelFullScreen();
    //       } else if (document.mozCancelFullScreen) {
    //         document.mozCancelFullScreen();
    //       } else if (document.msExitFullscreen) {
    //         document.msExitFullscreen();
    //       }
    //     } else {
    //       fullscreenName.value = "退出全屏";
    //       if (element.requestFullscreen) {
    //         element.requestFullscreen();
    //       } else if (element.webkitRequestFullScreen) {
    //         element.webkitRequestFullScreen();
    //       } else if (element.mozRequestFullScreen) {
    //         element.mozRequestFullScreen();
    //       } else if (element.msRequestFullscreen) {
    //         // IE11
    //         element.msRequestFullscreen();
    //       }
    //     }
    //     fullscreen.value = !fullscreen.value;
    //   }
    // };
    return {
      name,
      data,
      role,
      // fullscreen,
      // fullscreenName,
      alarmMgt,
      value: "",
      listb: [
        {
          imgsrc:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          imgsrc:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
      ],
      handlebuilding,
      handleMore,
      // handlefullScreen,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/index.css";
@import "../assets/css/icono.min.css";
@import "../assets/css/style.css";
@import "../assets/css/home.less";
@import "../assets/css/common.css";
&:deep(.content) {
  padding: 0 !important;
}
.monitor {
  margin-left: 10px;
}
#tag {
  z-index: 99999;
  position: absolute;
  // width: 380px;
  max-height: 380px;
  overflow: auto;
  padding: 10px;
  color: #fff;
  background: rgba(86, 122, 165, 0.438);
}
.roomList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.building_name {
  background: #0c95d6;
  // width: 80px;
  padding: 5px 10px;
  text-align: center;
  margin: 10px 0px 10px 10px;
  // cursor: pointer;
}
.building_name1 {
  background: #c44ec5;
  // width: 80px;
  padding: 5px 10px;
  text-align: center;
  margin: 10px 20px;
  cursor: pointer;
}
.todayA_cont {
  width: 70px;
}
.more {
  height: 30px;
  width: 100%;
  background: rgba(22, 57, 212, 0.39);
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  line-height: 30px;
}
&:deep(.el-input__inner) {
  color: #fff;
  height: 40px;
  width: 115px;
}
.category_info {
  color: #fff;
  font-size: 14px;
  // padding-top: 10px;
}
.category_info1 {
  width: 100%;
  color: #fff;
  font-size: 14px;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  position: relative;
  right: 10px;
}
// #electricityRestid{
//   overflow-y:auto;
// }
#electro-power {
  // top: 30px;
}
&:deep(.el-input--small .el-input__icon) {
  line-height: 42px;
}
.fullScreen {
  position: fixed;
  top: 70px;
  right: 0;
  z-index: 99999;
}
&:deep(.el-select-dropdown__item) {
  padding: 0 10px !important;
}
</style>
